<template>
  <view class="wotabs-wrap">
    <!-- <u-sticky :offset-top="offsetTop" h5-nav-height="44"> -->
    <u-tabs
			:list="list"
			class="nav-list"
			:current="current"
			:bg-color="getStyles.bgColor"
			:show-bar="false" :height="getStyles.tabHeight"
			:font-size="getStyles.fontSize"
			:gutter="getStyles.tabGutter"
			:inactive-color="getStyles.inactiveColor"
			:active-color="getStyles.activeColor"
      @change="changeNav"></u-tabs>
    <!-- </u-sticky> -->
  </view>
</template>

<script>
	export default {
		name:'WoTabs',
		props:{
			item:{
				type: Object,
				default: ()=> {}
			},
			styles:{
				type: Object,
				default: ()=> {
					currentIndex: 0;
					showBar: false;
					tabHeight: 70;
					fontSize: 28;
					tabGutter:20;
					inactiveColor: '#333';
					activeColor: '#fff'
				}
			}
		},

		data () {
			return {
				current: 0
			}
		},

		computed:{
			getStyles(){
				return this.item && this.item.styles
			},
			list(){
				return this.item && this.item.list
			},
		},
		created () {
			if (this.item) {
				this.current = this.item.attrs.currentIndex
			}
		},
		methods:{
			changeNav (i){
				this.current = i
				if (this.list[i].jump) {
					uni.navigateTo({
						url: '/' + this.list[i].jump
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
